@import '../variable/variable';
@mixin spacer($pre, $region, $sizes, $pos, $axis, $spacer) {
  @each $p in $pos {
    .#{$pre}-#{$p}-0 {
      #{$region}-#{$p}: 0 !important;
    }
  }
  @each $size, $value in $sizes {
    $spacing: $spacer * $value;
    .#{$pre}-#{$size} {
      #{$region}: $spacing !important;
    }
    @if ($size == md) {
      .#{$pre} {
        #{$region}: $spacing !important;
      }
    }
    @each $p in $pos {
      .#{$pre}-#{$p}-#{$size} {
        #{$region}-#{$p}: $spacing !important;
      }
      @if ($size == md) {
        .#{$pre}-#{$p} {
          #{$region}-#{$p}: $spacing !important;
        }
      }
    }
    @each $a, $a1, $a2 in $axis {
      .#{$pre}-#{$a}-#{$size} {
        #{$region}-#{$a1}: $spacing !important;
        #{$region}-#{$a2}: $spacing !important;
      }
      @if ($size == md) {
        .#{$pre}-#{$a} {
          #{$region}-#{$a1}: $spacing !important;
          #{$region}-#{$a2}: $spacing !important;
        }
      }
    }
  }
}

$sizes: (
  xs: 0.625,
  // 10px
  sm: 1.25,
  // 20px
  md: 2.5,
  // 40px
  lg: 3.75,
  // 60px
  xl: 5,
  // 80px
  xxl: 6.25,
  // 100px
);
$pos: left, top, right, bottom;
$axis:
  x left right,
  y top bottom;
@include spacer(p, padding, $sizes, $pos, $axis, 16px);
@include spacer(m, margin, $sizes, $pos, $axis, 16px);
